import { Form, Input, Button, message } from "antd";
import "antd/es/form/style/css";
import "antd/es/input/style/css";
import "antd/es/message/style/css";

export default function Login() {
  const onFinish = (values) => {
    console.log("Success:", values);
    if (testAccount.includes(values.username)) {
      const auth =
        values.username == testAccount[2]
          ? { userName: values.username, auth: 2 }
          : { userName: values.username, auth: 1 };
      message.info("正在登录……");
      sessionStorage.setItem("USER", JSON.stringify(auth));
      setTimeout(() => {
        window.location.href = "/backend";
      }, 300);
    } else {
      message.info("请选择一个测试账号");
    }
  };

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  const testAccount = ["user1", "user2", "admin"];

  return (
    <div className="login-content">
      <div className="login-tip">
        请选择一个账号：
        {testAccount.map((item) => {
          return `${item}，`;
        })}
        密码随意。
      </div>
      <Form
        name="basic"
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item
          label="账号"
          name="username"
          rules={[{ required: true, message: "请输入账号!" }]}
        >
          <Input placeholder="账号" />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[{ required: true, message: "请输入密码!" }]}
        >
          <Input.Password placeholder="密码" />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
          <Button type="primary" htmlType="submit">
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}
